<template>
  <div class="user-management">
    <div class="header">
      <h2>用户管理</h2>
      <div class="header-actions">
        <el-input v-model="searchQuery" placeholder="搜索用户名、手机号或邮箱" 
          style="width: 200px; margin-right: 16px;" clearable />
        <el-button type="primary" @click="handleAdd">
          <el-icon>
            <Plus />
          </el-icon>
          添加用户
        </el-button>
      </div>
    </div>

    <div class="table-container">
      <el-table :data="filteredUsers" style="width: 100%" stripe border
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" v-loading="loading">
        <el-table-column prop="id" label="用户ID" width="80" fixed="left" />

        <el-table-column prop="username" label="用户名" width="120" fixed="left">
          <template #default="scope">
            <div class="username-cell">
              <span>{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="头像" width="80">
          <template #default="scope">
            <div class="avatar-cell">
              <el-avatar :size="40" :src="scope.row.avatar" @click="previewAvatarImage(scope.row.avatar)"
                style="cursor: pointer">
                <el-icon>
                  <User />
                </el-icon>
              </el-avatar>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="phone" label="手机号" width="130">
          <template #default="scope">
            <span>{{ scope.row.phone || '-' }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="密码" width="150">
          <template #default="scope">
            <div class="password-cell">
              <span v-if="!scope.row.showPassword" class="password-hidden">
                ••••••••
              </span>
              <span v-else class="password-visible">
                {{ scope.row.password }}
              </span>
              <el-button type="text" size="small" @click="togglePassword(scope.row)" class="password-toggle">
                <el-icon>
                  <View v-if="!scope.row.showPassword" />
                  <Hide v-else />
                </el-icon>
              </el-button>
            </div>
          </template>
        </el-table-column> -->

        <el-table-column prop="fullLocation" label="居住地" width="150">
          <template #default="scope">
            <span>{{ scope.row.fullLocation || '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="105">
          <template #default="scope">
            <el-select v-model="scope.row.status" size="small" @change="handleStatusChange(scope.row)"
              style="width: 80px">
              <el-option label="正常" value="active" />
              <el-option label="禁用" value="disabled" />
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="email" label="邮箱" width="180">
          <template #default="scope">
            <span>{{ scope.row.email || 'null' }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="registerTime" label="注册时间" width="160">
          <template #default="scope">
            <span>{{ formatDate(scope.row.registerTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="160" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)" :icon="Edit"
                style="padding: 4px 8px; font-size: 12px">
                修改
              </el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row)" :icon="Delete"
                style="padding: 4px 8px; font-size: 12px">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
        :total="totalUsers" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <!-- 头像预览对话框 -->
    <el-dialog v-model="avatarPreviewVisible" title="头像预览" width="400px" :top="'3%'">
      <div class="avatar-preview">
        <img :src="previewAvatarUrl" alt="头像预览" style="width: 100%; max-width: 300px;" />
      </div>
    </el-dialog>

    <!-- 用户编辑对话框 -->
    <el-dialog v-model="editDialogVisible" :title="editForm.id ? '编辑用户' : '添加用户'" width="600px" :top="'3%'">
      <el-form :model="editForm" :rules="formRules" ref="editFormRef" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" type="password" show-password />
        </el-form-item>
        
        <!-- 添加用户时只显示这四个字段 -->
        <template v-if="!editForm.id">
          <el-form-item label="居住地" prop="cityId">
            <el-row :gutter="30">
              <el-col :span="20">
                <el-select
                  v-model="editForm.province"
                  placeholder="省份"
                  @change="handleProvinceChange"
                  style="width: 100%"
                >
                  <el-option
                    v-for="province in provinces"
                    :key="province.id"
                    :label="province.name"
                    :value="province.id"
                  />
                </el-select>
              </el-col>
              <el-col :span="20">
                <el-select
                  v-model="editForm.cityId"
                  placeholder="城市"
                  style="width: 100%"
                  :disabled="!editForm.province"
                >
                  <el-option
                    v-for="city in currentCities"
                    :key="city.id"
                    :label="city.cityName || city.name"
                    :value="city.id"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </template>
        
        <!-- 编辑用户时显示完整字段 -->
        <template v-else>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email" />
          </el-form-item>
          <el-form-item label="居住地" prop="location">
            <el-row :gutter="30">
              <el-col :span="20">
                <el-select
                  v-model="editForm.province"
                  placeholder="省份"
                  @change="handleProvinceChange"
                  style="width: 100%"
                >
                  <el-option
                    v-for="province in provinces"
                    :key="province.id"
                    :label="province.name"
                    :value="province.id"
                  />
                </el-select>
              </el-col>
              <el-col :span="20">
                <el-select
                  v-model="editForm.city"
                  placeholder="城市"
                  style="width: 100%"
                  :disabled="!editForm.province"
                >
                  <el-option
                    v-for="city in currentCities"
                    :key="city.id"
                    :label="city.name"
                    :value="city.id"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <div class="avatar-upload-section">
              <div class="avatar-preview">
                <el-avatar
                  :size="80"
                  :src="editForm.avatar || previewAvatar"
                  @click="previewCurrentAvatar"
                  style="cursor: pointer"
                >
                  <el-icon><User /></el-icon>
                </el-avatar>
                <div class="avatar-actions">
                  <el-upload
                    ref="avatarUploadRef"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :on-change="handleAvatarChange"
                    :auto-upload="false"
                    accept="image/*"
                  >
                    <el-button size="small" type="primary">
                      <el-icon><Upload /></el-icon>
                      上传头像
                    </el-button>
                  </el-upload>
                  <el-button
                    v-if="editForm.avatar || previewAvatar"
                    size="small"
                    @click="clearAvatar"
                  >
                    清除头像
                  </el-button>
                </div>
              </div>
              <div class="upload-tip">
                支持 jpg、png 格式，文件大小不超过 2MB
              </div>
            </div>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="editForm.status" style="width: 100%">
              <el-option label="正常" value="active" />
              <el-option label="禁用" value="disabled" />
            </el-select>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, User, View, Hide, Edit, Delete, Upload } from '@element-plus/icons-vue'
import { getUserPage, updateUser, register, getProvinceList, getCityList, getUserDetails, getProvinceNameByCityId, deleteUser } from '@/api/user'

// 响应式数据
const loading = ref(false)
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const totalUsers = ref(0)
const avatarPreviewVisible = ref(false)
const previewAvatarUrl = ref('')
const editDialogVisible = ref(false)
const editFormRef = ref()
const avatarUploadRef = ref()
const previewAvatar = ref('')

// 用户数据
const users = ref([])

// 编辑表单
const editForm = reactive({
  id: null,
  username: '',
  phone: '',
  password: '',
  email: '',
  location: '',
  province: '',
  city: '',
  avatar: '',
  status: 'active'
})

// 省市数据
const provinces = ref([])

const currentCities = ref([])

// 表单验证规则
const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  cityId: [
    { required: true, message: '请选择居住城市', trigger: 'change' }
  ]
}

// 计算属性 - 过滤用户
const filteredUsers = computed(() => {
  if (!searchQuery.value) {
    return users.value
  }
  const query = searchQuery.value.toLowerCase()
  return users.value.filter(user =>
    user.username.toLowerCase().includes(query) ||
    (user.phone && user.phone.includes(query)) ||
    (user.email && user.email.toLowerCase().includes(query))
  )
})

// 方法
const togglePassword = (user) => {
  user.showPassword = !user.showPassword
}

const previewAvatarImage = (avatarUrl) => {
  if (avatarUrl) {
    previewAvatarUrl.value = avatarUrl
    avatarPreviewVisible.value = true
  } else {
    ElMessage.warning('该用户未设置头像')
  }
}

const handleStatusChange = (user) => {
  ElMessage.success(`用户 ${user.username} 状态已更新为 ${getStatusText(user.status)}`)
  // 这里可以调用API更新用户状态
}

const getStatusText = (status) => {
  const statusMap = {
    active: '正常',
    disabled: '禁用',
  }
  return statusMap[status] || status
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString('zh-CN')
}

const handleAdd = () => {
  resetEditForm()
  editDialogVisible.value = true
}

const handleEdit = async (user) => {
  try {
    console.log('开始编辑用户:', user)
    
    // 先尝试获取用户详情
    let userDetails
    try {
      userDetails = await getUserDetails(user.id)
      console.log('获取到的用户详情:', userDetails)
    } catch (detailsError) {
      console.error('获取用户详情失败，使用基础用户信息:', detailsError)
      // 如果获取详情失败，使用传入的基础用户信息
      userDetails = { ...user }
      ElMessage.warning('无法获取完整用户信息，将使用基础信息进行编辑')
    }
    
    // 重置表单并设置用户信息
    resetEditForm()
    Object.assign(editForm, { ...userDetails })
    
    // 重置省市相关字段
    editForm.province = null
    editForm.city = null
    currentCities.value = []
    
    // 如果有城市ID且不为null，获取省市信息
    if (userDetails.cityId && userDetails.cityId !== null) {
      try {
        console.log('开始获取省市信息，cityId:', userDetails.cityId)
        
        // 获取省名
        const provinceName = await getProvinceNameByCityId(userDetails.cityId)
        console.log('获取到的省名:', provinceName)
        
        // 根据省名找到对应的省份ID
        const province = provinces.value.find(p => p.name === provinceName)
        if (province) {
          editForm.province = province.id
          
          // 获取该省份的城市列表
          const cities = await getCityList(province.id)
          currentCities.value = cities || []
          console.log('获取到的城市列表:', cities)
          
          // 设置当前城市 - 优先使用cityName匹配，如果没有则使用cityId
          if (userDetails.cityName) {
            // 根据cityName找到对应的城市ID
            const currentCity = cities.find(city => 
              (city.cityName && city.cityName === userDetails.cityName) ||
              (city.name && city.name === userDetails.cityName)
            )
            editForm.city = currentCity ? currentCity.id : userDetails.cityId
          } else {
            editForm.city = userDetails.cityId
          }
          
          console.log('设置的省市信息 - 省份:', editForm.province, '城市:', editForm.city)
        } else {
          console.warn('未找到匹配的省份:', provinceName)
        }
      } catch (error) {
        console.error('获取省市信息失败:', error)
        ElMessage.warning('该用户的居住地信息可能不完整，请重新选择')
      }
    } else {
      console.log('用户没有设置居住地信息或cityId为null')
    }
    
    // 设置预览头像
    previewAvatar.value = userDetails.avatar || ''
    
    // 打开编辑对话框
    editDialogVisible.value = true
    console.log('编辑对话框已打开')
    
  } catch (error) {
    console.error('编辑用户过程中发生错误:', error)
    ElMessage.error('打开编辑对话框失败，请重试')
  }
}

const handleDelete = async (user) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除用户 "${user.username}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        roundButton: true,
        type: 'warning',
      }
    )

    // 调用真实的删除API
    const response = await deleteUser(user.id)
    
    if (response.code === 200) {
      ElMessage.success('删除成功')
      // 重新加载用户列表
      loadUserList()
    } else {
      ElMessage.error(response.msg || '删除失败')
    }
  } catch (error) {
    if (error.message !== 'cancel') {
      console.error('删除用户失败:', error)
      ElMessage.error(error.message || '删除失败')
    } else {
      ElMessage.info('已取消删除')
    }
  }
}

const handleSave = async () => {
  try {
    await editFormRef.value.validate()

    if (editForm.id) {
      // 编辑用户 - 调用真实API
      const updateData = {
        id: editForm.id,
        username: editForm.username,
        phone: editForm.phone,
        email: editForm.email,
        status: editForm.status === 'active' ? '正常' : '禁用',
        cityId: editForm.city || null  // 添加城市ID字段
        // 注意：不包含 avatar 字段，头像通过 avatarFile 上传
      }
      
      // 如果有头像文件需要上传，添加到 updateData
      if (editForm.avatarFile) {
        updateData.avatarFile = editForm.avatarFile
      }
      
      console.log('发送更新数据:', updateData)
      const response = await updateUser(updateData)
      
      if (response.code === 200) {
        ElMessage.success('用户信息更新成功')
        editDialogVisible.value = false
        // 重新加载用户列表
        loadUserList()
      } else {
        ElMessage.error(response.msg || '更新失败')
      }
    } else {
      // 添加用户 - 调用注册接口
      const registerData = {
        username: editForm.username,
        password: editForm.password,
        phone: editForm.phone,
        cityId: editForm.cityId
      }
      
      const response = await register(registerData)
      
      if (response.code === 200) {
        ElMessage.success('用户添加成功')
        editDialogVisible.value = false
        // 重新加载用户列表
        loadUserList()
      } else {
        ElMessage.error(response.msg || '添加用户失败')
      }
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  }
}

const resetEditForm = () => {
  Object.assign(editForm, {
    id: null,
    username: '',
    phone: '',
    password: '',
    email: '',
    location: '',
    province: null,
    city: null,
    cityId: null,
    avatar: '',
    status: 'active'
  })
  previewAvatar.value = ''
  currentCities.value = []
}

// 省份改变时重置城市选择并获取城市列表
const handleProvinceChange = async () => {
  editForm.city = null
  editForm.cityId = null
  currentCities.value = []
  
  if (editForm.province) {
    try {
      const cities = await getCityList(editForm.province)
      currentCities.value = cities || []
      console.log('获取到的城市列表:', cities)
      // 检查城市数据结构
      if (cities && cities.length > 0) {
        console.log('第一个城市的数据结构:', cities[0])
        console.log('城市字段:', Object.keys(cities[0]))
      }
    } catch (error) {
      console.error('获取城市列表失败:', error)
      ElMessage.error('获取城市列表失败')
    }
  }
}

// 解析居住地为省市
const parseLocationToProvinceCity = async (location) => {
  // 简单的解析逻辑，实际项目中可能需要更复杂的匹配
  for (const province of provinces.value) {
    if (location.includes(province.name.replace('省', '').replace('市', ''))) {
      editForm.province = province.id
      try {
        const cities = await getCityList(province.id)
        currentCities.value = cities || []
        for (const city of cities) {
          if (location.includes(city.name.replace('市', ''))) {
            editForm.city = city.id
            break
          }
        }
      } catch (error) {
        console.error('获取城市列表失败:', error)
      }
      break
    }
  }
}

// 获取完整的居住地名称
const getFullLocationName = () => {
  if (!editForm.province || !editForm.city) return ''
  
  const provinceName = provinces.value.find(p => p.id === editForm.province)?.name || ''
  const cityName = currentCities.value.find(c => c.id === editForm.city)?.name || ''
  
  return `${provinceName}${cityName}`
}

// 头像上传前验证
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('头像只能是 JPG/PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB!')
    return false
  }
  return true
}

// 头像文件改变
const handleAvatarChange = (file) => {
  if (file.raw) {
    const reader = new FileReader()
    reader.onload = (e) => {
      previewAvatar.value = e.target.result
      editForm.avatar = e.target.result // 这里实际项目中应该上传到服务器获取URL
    }
    reader.readAsDataURL(file.raw)
  }
}

// 清除头像
const clearAvatar = () => {
  previewAvatar.value = ''
  editForm.avatar = ''
  if (avatarUploadRef.value) {
    avatarUploadRef.value.clearFiles()
  }
}

// 预览当前头像
const previewCurrentAvatar = () => {
  const avatarUrl = editForm.avatar || previewAvatar.value
  if (avatarUrl) {
    previewAvatarUrl.value = avatarUrl
    avatarPreviewVisible.value = true
  } else {
    ElMessage.warning('暂无头像可预览')
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  loadUserList()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadUserList()
}

// 获取用户列表
const loadUserList = async () => {
  try {
    loading.value = true
    const params = {
      pageNum: currentPage.value,
      // pageSize: pageSize.value
    }
    JSON.stringify(params)
    
    const response = await getUserPage(params)
    
    if (response.code === 200) {
      // 处理API返回的数据，映射到前端需要的格式
      const userList = response.data.records || []
      
      // 为每个用户获取详细信息（包含cityName和provinceName）
      const usersWithDetails = await Promise.all(
        userList.map(async (user) => {
          try {
            // 获取用户详情以获取cityName
            const userDetails = await getUserDetails(user.id)
            let provinceName = ''
            
            // 如果有cityId，获取省名
            if (userDetails.cityId) {
              try {
                provinceName = await getProvinceNameByCityId(userDetails.cityId)
              } catch (error) {
                console.error(`获取用户${user.id}省名失败:`, error)
              }
            }
            
            // 组合省名和市名
            const fullLocation = provinceName && userDetails.cityName 
              ? `${provinceName}${userDetails.cityName}`
              : userDetails.cityName || provinceName || '-'
            
            return {
              ...user,
              // 映射状态字段
              status: user.status === '正常' ? 'active' : 'disabled',
              // 映射注册时间字段
              registerTime: user.createTime,
              // 添加密码显示控制
              showPassword: false,
              // 设置默认密码（实际项目中不应该显示真实密码）
              password: '••••••••',
              // 使用详情接口返回的cityName
              cityName: userDetails.cityName || '-',
              // 组合的完整居住地（省名+市名）
              fullLocation: fullLocation
            }
          } catch (error) {
            console.error(`获取用户${user.id}详情失败:`, error)
            return {
              ...user,
              status: user.status === '正常' ? 'active' : 'disabled',
              registerTime: user.createTime,
              showPassword: false,
              password: '••••••••',
              cityName: '-',
              fullLocation: '-'
            }
          }
        })
      )
      
      users.value = usersWithDetails
      // 计算总数：pages * pageSize
      
      totalUsers.value = response.data.pages * response.data.pageSize
      currentPage.value = response.data.pageNum
      pageSize.value = response.data.pageSize
    } else {
      ElMessage.error(response.msg || '获取用户列表失败')
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    ElMessage.error('获取用户列表失败')
  } finally {
    loading.value = false
  }
}

// 获取省份列表
const loadProvinceList = async () => {
  try {
    const provinceList = await getProvinceList()
    provinces.value = provinceList || []
  } catch (error) {
    console.error('获取省份列表失败:', error)
    ElMessage.error('获取省份列表失败')
  }
}

// 生命周期
onMounted(() => {
  loadUserList()
  loadProvinceList()
})
</script>

<style scoped>
.user-management {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

.header {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.table-container {
  margin-bottom: 20px;
  overflow-x: auto;
}

.username-cell {
  font-weight: 500;
  color: #409eff;
}

.avatar-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.password-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.password-hidden {
  font-family: monospace;
  letter-spacing: 2px;
}

.password-visible {
  font-family: monospace;
  color: #e6a23c;
}

.password-toggle {
  padding: 4px;
  min-height: auto;
}

.action-buttons {
  display: flex;
  gap: 4px;
}

.action-buttons .el-button {
  padding: 4px 8px;
  font-size: 12px;
  min-height: auto;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.avatar-preview {
  text-align: center;
}

.avatar-preview img {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.avatar-upload-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.avatar-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-actions {
    justify-content: space-between;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-buttons .el-button {
    font-size: 12px;
    padding: 4px 6px;
  }
}

/* 表格滚动条样式 */
.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>